import React, { Component, createRef } from "react"
// Import Swiper React components
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
// import { Swiper, SwiperSlide } from 'swiper/react';
import Swiper from 'swiper';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: 'React',
            List: [1, 2, 3, 4, 5, 6, 12312312, 7, 8, 123, 81111111111, 954, 64, 54, 45, 645]

        }
    }

    // 方法
    testa() {

        this.setState({
            name: 'Vue'
        })
    }
    inputRef = React.createRef()

    componentDidMount() {
        console.log('componentDidMount')
        new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
    }

    render() {
        return (
            <div>
                <h2>{this.state.name}</h2>
                <div>
                    <div className="swiper" style={{ height: '200px' }}>
                        <div className="swiper-wrapper">
                            {/* <div className="swiper-slide">Slide 1</div>
                            <div className="swiper-slide">Slide 2</div>
                            <div className="swiper-slide">Slide 3</div> */}
                            {
                                this.state.List.map((item) =>
                                    <div className="swiper-slide" key={item}>{
                                        item
                                    }</div>
                                )
                            }
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                    导航等组件可以放在Swiper容器之外
                </div>
            </div>

        )
    }
}
export default App;